<template>
	<NavBarVue title='商家文章详情' />
	<u-sticky offset-top="0">
		<view class="top">
			<view class="zuo" style="display: flex;align-items: center;">
				<view class="ttop">
					<image src="/static/images/1006.png" class="tx" />
					<view style="padding-left: 5px;">
						<view style="font-size: 28rpx; font-weight: 600;">小帅锅Frankie</view>
						<view style="color:#ccc; display: flex;" @click="jumpShop">
							<u-icon name="map" size="18" color="#ccc"></u-icon>
							<view style="font-size:24rpx;">畅饮无极限</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 关注 -->
			<view class="you" style="display: flex;">
				<view class="gz">关注</view>
				<image class="share" src="/static/分享2.png" @click="show = true" />
			</view>
		</view>
	</u-sticky>
	<view class="zong">
		<view class="box">
			<!-- 底部弹框 -->
			<u-popup :show="show" customStyle="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;" mode="bottom"
				bgColor="#f3f3f3" @close="close" @open="open">
				<view>
					<view class="titf">
						<text>分享至</text>
					</view>
					<view class="icons">
						<view class="icoul">
							<view class="icoli" v-for="item in shal" :key="item.id">
								<image :src="item.img" />
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
					<button @click="close" style="font-size: 28rpx;height: 120rpx;">取消</button>
				</view>
			</u-popup>
			<!--0元购车弹框-->
			<u-popup class="gocar" :show="shows" @close="closes" @open="opens"
				customStyle="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;">
				<view class="goucar">
					<div class="goucar_img">
						<!-- <image src="../../static/Sn46.png" /> -->
					</div>
					<view class="botgcar" v-for="item in gcartex" :key="item.id">
						<view class="lefgcar">
							<view style="font-weight: 600;font-size: 40rpx;">{{item.name}}</view>
							<view style="font-size: 24rpx;color:#999;margin-top: 5rpx;">{{item.nr}}</view>
						</view>
						<view class="btn" @click="getCoupon">{{item.btn}}</view>
					</view>
				</view>
			</u-popup>
			<view class="snr">

				<swiper class="lunb" indicator-dots indicator-color="#fff" indicator-active-color="red" autoplay interval="2000"
					circular>

					<swiper-item>
						<view class="item">
							<!-- <image src='/static/banner1.png' /> -->
							<button class="items" @click="shows= true">
								零元购车
							</button>
						</view>
					</swiper-item>
				</swiper>
				<!--  -->
				<view class="nr" v-for="item in nrlist" :key="item.id">
					<view style="font-size:32rpx;font-weight:500;color:#6D6D6D;margin:16rpx 0rpx">{{item.topname}}
					</view>
					<view style="font-size: 28rpx;color:#666;margin-bottom: 28rpx;">
						{{item.botnr}}
					</view>
					<view style="font-size:28rpx;color:#333333">{{item.kt}}</view>

					<view class="aas"><span>7月14号</span> <span>北京</span></view>
					<view class="plas">共计{{n}}条评论</view>
					<view class="ping">
						<image src="/static/imgAll/img／small-1.png" class="tx" />
						<!-- input -->
						<input type="text" class="ping_inp" placeholder="爱评论的人运气不会差" style="height: 72rpx;" />

					</view>

					<view class="ping" v-for="item in plist" :key="item.id">
						<!-- 头像 -->
						<image :src="item.imgs" class="tx" />
						<!-- 右侧内容 -->
						<view class="yoww">
							<view class="yoww_con">
								<div class="con">
									<view class="yoww_name">{{item.name}}</view>
									<!-- <view class="" style="display: flex;"> -->
									<span style="font-size: 28rpx; color:#666">{{item.nr}}</span>
									<span class="sjtim">{{item.time}}</span>
								</div>
								<view class="lick">
									<u-icon name="heart" style="margin-left: 22rpx" color="#ccc" size="18"></u-icon>
									<view style="font-size: 28rpx; color:#999">{{item.zan}}</view>
								</view>
							</view>

							<view class="ping" v-for="item in plist" :key="item.id">
								<!-- 头像 -->
								<view>
									<image :src="item.imgs" class="child_tx" />
								</view>
								<!-- 右侧内容 -->
								<view class="yoww">
									<view class="yoww_con">
										<div class="con">
											<view class="yoww_name">{{item.name}}</view>
											<!-- <view class="" style="display: flex;"> -->
											<span style="font-size: 28rpx; color:#666">{{item.nr}}</span>
											<span class="sjtim">{{item.time}}</span>
										</div>
										<view class="lick">
											<u-icon name="heart" style="margin-left: 20rpx" color="#ccc" size="22"></u-icon>
											<view style="font-size: 28rpx; color:#999">{{item.zan}}</view>
										</view>
									</view>
								</view>
							</view>


						</view>
					</view>


				</view>



				<!-- 评论 -->

				<!-- 评论2 -->

			</view>
		</view>
		<view class="bottom" style="display: flex;">
			<view class="cbds">
				<input type="text" placeholder="发条有爱评论～" />
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view class="bottom_list">
					<u-icon name="heart" color="#ccc" size="24"></u-icon>
					<view style="font-size: 24rpx; color:#777777">{{zasou.zan}}</view>
				</view>
				<view class="bottom_list">
					<u-icon name="star" color="#ccc" size="24"></u-icon>
					<view style="font-size: 24rpx; color:#777777">{{zasou.sc}}</view>
				</view>
				<view class="bottom_list">
					<u-icon name="chat" color="#ccc" size="24"></u-icon>
					<view style="font-size: 24rpx; color:#777777">{{zasou.ptxt}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from "vue"
	import NavBarVue from "../../../../components/NavBar.vue";
	import { useUserReceive } from '../../../../store'
	const n = ref(9999)
	//显示隐藏
	const show = ref(false)
	const shows = ref(false)
	const open = () => {
		show.value = true
	}
	const close = () => {
		show.value = false
		console.log('close');
	}
	const opens = () => {
		shows.value = true
	}
	const closes = () => {
		shows.value = false
		console.log('close');
	}

	//零元购弹框底部文字
	const gcartex = reactive([
		{ id: 0, name: "预约驾驶", nr: "感受蔚然科技，走上科技人生", btn: "领券购买" }
	])

	//分享图标数据----------
	const shal = reactive([
		{ id: 0, name: "微信好友", img: "/static/微信.png" },
		{ id: 1, name: "朋友圈", img: "/static/朋友圈.png" },
		{ id: 2, name: "QQ好友", img: "/static/QQ.png" },
		{ id: 3, name: "QQ空间", img: "/static/QQ空间.png" },
		{ id: 4, name: "微博", img: "/static/微博.png" },
		{ id: 5, name: "生成分享图", img: "/static/图片.png" },
		{ id: 6, name: "复制链接", img: "/static/复制链接.png" },
		{ id: 7, name: "不喜欢", img: "/static/不喜欢.png" },
		{ id: 8, name: "举报", img: "/static/举报.png" },
	])
	const plist = reactive([
		{ id: 0, name: '王晓晓', nr: "下地铁再走两步就到", zan: "650", imgs: "/static/images/1002.png", time: "", btnone: "作者赞过", btntwo: "作者", },
		{ id: 1, name: '李红达', nr: "改天去看热水的风险二个好人是古代中国合同黑色红色看", zan: "350", imgs: "/static/images/1003.png", time: "" },
		{ id: 2, name: '王大拿', nr: "啊hers公噶尔给人打工司如果输入格式的", zan: "550", imgs: "/static/images/1004.png", time: "前天：18:18" },
		{ id: 3, name: '陈莉莉', nr: "走，出热色赫特河阿惹萨二世灌水灌水发", zan: "250", imgs: "/static/images/1005.png", time: "前天：18:18" },
		{ id: 4, name: '李红达', nr: "改天去看看", zan: "350", imgs: "/static/images/1006.png", time: "前天：18:18" },
	])
	//赞收藏
	const zasou = reactive(
		{ id: 0, zan: "1.2W", sc: "480", ptxt: "8250" }
	)
	const onback = () => {
		uni.navigateBack({
			delta: 2
		});
	}
	//跳转个人首页
	const jumpShop = () => {
		uni.navigateTo({
			url: "/pages/eventDetails/eventDetails"
		})
	}
	//轮播下面的文字
	const nrlist = reactive([
		{ id: 0, topname: "家人们，泰库辣!", botnr: "和朋友一起畅享唱歌的快乐，感受音乐的力量!歌声激荡，快乐洋溢，尽在我们的KTV之夜!", kt: "#KTV #夜猫" }
	])
	//内部评论--------第二层评论
	const nepil = reactive([
		{ id: 0, btnone: "作者赞过", btntwo: "作者", name: "小帅锅Frankie", enr: "地址：大钟寺地铁站钟鼎大楼下", time: "昨天：09:30", hf: "展开3条回复", imgs: "/static/2.jpg" },
		// {id:1,btnone:"",btntwo:"",name:"果果冬冬",enr:"地址：好近",time:"昨天：09:32",hf:"展开3条回复"},
	])

	const userReceive = useUserReceive()
	// 用户获取优惠劵
	const getCoupon = async () => {
		const res = await userReceive.userReceiveSave({
			activityId: 0,
			couponCode: "",
			couponId: 0,
			receiveChannel: 0,
			shopId: 0,
			userId: 0
		})
		if (res?.code === '0') {
			uni.showToast({
				title: res?.message
			})
		} else {
			
		}
	}
</script>


<style lang="scss" scoped>
	.zong {
		width: 100vw;
		// height: 100vh;
		overflow: hidden;
		padding-bottom: 150rpx;
		font-family: PingFangSC, PingFang SC;
	}

	.login_top {
		margin-top: 40rpx;
		height: 40px;
		display: flex;
		align-items: center;

		.top_p {
			flex: 1;
			text-align: center;
			font-weight: bold;
		}
	}

	.botgcar {
		height: 156rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 48rpx;

		.btn {
			width: 296rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
			color: white;
			font-size: 28rpx;
			border-radius: 40rpx;
			text-align: center;
		}
	}

	.gcar {
		width: 100vw;
		height: auto;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.goucar {
		width: 100%;
		height: auto;
		box-sizing: border-box;

		.goucar_img {
			background-color: #F3F3F3;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		}
	}

	.goucar image {
		width: 686rpx;
		height: 896rpx;
		margin: 32rpx;
		border-radius: 16rpx;

	}

	// 轮播样式---------------
	.lunb {
		height: 422rpx;
	}

	.lunb .item {
		height: 100%;
		text-align: center;
		line-height: 400rpx;
		position: relative;

	}

	swiper-item:nth-child(1) .item {
		background-color: skyblue;

	}

	swiper-item:nth-child(2) .item {
		background-color: pink;
	}

	swiper-item:nth-child(3) .item {
		background-color: purple;
	}

	.item image {
		width: 100%;
		height: 100%;

	}

	.items {
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		color: #fff;
		font-size: 24rpx;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
		background: none;
		border: 2rpx solid #fff;
	}

	//-----------------------

	.top {

		width: 100%;
		height: 88rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
	}


	.box {
		width: 100vw;
		// height: calc(100vh - 120rpx);
		overflow: hidden;
		box-sizing: border-box;
		padding: 10rpx 0rpx;
	}

	.titf {
		width: 100vw;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.icons {
		width: 100vw;
		height: auto;
		box-sizing: border-box;
		padding: 22rpx;

		.icoul {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;

			.icoli {
				width: 120rpx;
				height: 120rpx;
				font-size: 24rpx;
				text-align: center;
				margin-top: 30rpx;
				margin-right: 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}

	.snr {
		width: 100%;

		// height: calc(100vh - 120rpx);
		// overflow: auto;
		.nr {
			padding: 32rpx;
		}
	}

	.sjtim {
		margin-left: 20rpx;
		color: #ccc;
		font-size: 24rpx;
	}

	.tx {
		width: 72rpx;
		height: 72rpx;
		border-radius: 36rpx;
		margin-right: 8rpx;
	}

	.txs {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;

	}

	.ttop {
		width: 400rpx;
		display: flex;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.you {
		line-height: 100rpx;
		height: 100rpx;

	}

	.share {
		width: 46rpx;
		height: 46rpx;
		margin-top: 24rpx;
	}

	.you button {
		width: 160rpx;
		height: 60rpx;
		font-size: 28rpx;
		background: rgb(90, 144, 226);
		border-radius: 40rpx;
	}

	.gz {
		margin-right: 20rpx;
		margin-top: 10px;
		width: 120rpx;
		height: 55rpx;
		line-height: 55rpx;
		font-size: 28rpx;
		color: white;
		text-align: center;
		border-radius: 30rpx;
		background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
	}

	.lick {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0rpx 5rpx;
	}



	.ping {
		width: 100%;
		height: auto;
		display: flex;
		margin-top: 20rpx;
		// align-items: center;
		box-sizing: border-box;

		// padding:0rpx 30rpx;
		.child_tx {
			height: 48rpx;
			width: 48rpx;
		}
	}

	.yoww {
		font-size: 24rpx;
		width: 87%;
		box-sizing: border-box;
		padding-left: 30rpx;
		// align-items: center;
		justify-content: space-between;
		flex: 1;

		/* background: blue; */
		.yoww_con {
			flex: 1;
			display: flex;

			.con {
				flex: 1;
			}

			.yoww_name {
				font-size: 24rpx;
				color: #ccc
			}

		}
	}


	.plas {
		font-size: 26rpx;
		color: #666;
		padding: 20rpx 0rpx;
	}

	.aas {
		font-size: 24rpx;
		color: #cccccc;
		padding: 30rpx 0rpx;
		border-bottom: 2rpx solid #EAEAEA;
	}


	.ping_inp {

		margin-left: 30rpx;
		height: 72rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		flex: 1;
		background-color: #F5F5F5;
		border-radius: 36rpx;
		padding-left: 50rpx;

	}


	.bottom {
		width: 100%;
		height: 72rpx;
		padding: 20rpx 0rpx;
		border-top: 2rpx solid #EAEAEA;
		background: white;
		display: flex;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0rpx;

		.bottom_list {
			display: flex;
			margin-right: 10px;
			align-items: center;
		}
	}

	.cbds {
		margin: 0rpx 32rpx;

		width: 300rpx;
		height: 72rpx;
		line-height: 72rpx;

		box-sizing: border-box;
		padding: 15rpx;
		background: #f2f2f2;
		border-radius: 40rpx;
		font-size: 24rpx;


	}

	.pltwo {
		.btnone {
			width: 110rpx;
			height: 60rpx;
			font-size: 24rpx;
		}
	}
</style>